<template>
  <f7-page>
    <!-- 导航栏 -->
    <qm-currentcy-navbar title="病害详情" bgColor="#1CBC9A" color="#fff">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>
    <!-- 百度地图 -->
    <qm-baidu-map></qm-baidu-map>
    <!-- 详情标题、标签 -->
    <f7-block class="detail-title">
      <div class="title">{{title}}</div>
      <div class="tags-wrapper">
        <van-tag
          v-for="(item, index) in tags"
          :key="index"
          plain
          type="primary"
          :color="item.color"
        >
          {{item.title}}
        </van-tag>
      </div>
    </f7-block>
    <!-- 进度条 -->
    <f7-block class="main">
      <qm-steps>
        <template v-slot="slotProps">
          <qm-step
            v-for="(step, i) in steps"
            :key="i + step.title"
            :title="step.title"
            :inactiveIcon="step.icon"
            :activeIcon="`${step.icon}-fill`"
            v-bind="slotProps"
          >
            <template #inactive-icon>
              <img :src="step.icon" width="18">
            </template>
            <template #active-icon>
              <img :src="step.activeIcon" width="18">
            </template>
            <template #finish-icon>
              <img :src="step.finishIcon" width="18">
            </template>
          </qm-step>
        </template>
      </qm-steps>
    </f7-block>
    <f7-block class="info-wrapper">
      <f7-block class="info-item">
        <f7-block-title class="info-title">
          请填写信息
        </f7-block-title>
        <f7-block class="info">
          <span class="info-name">任务编号</span>
          <span class="info-text">BH20220216-002</span>
        </f7-block>
        <f7-block class="info">
          <span class="info-name">病害位置</span>
          <span class="info-text">广州黄埔区广州市开发区税务局创意园A栋</span>
        </f7-block>
        <f7-block class="info">
          <span class="info-name">养护项目</span>
          <span class="info-text">云城南四路车行隧道</span>
        </f7-block>
        <f7-block class="info">
          <span class="info-name">项目类型</span>
          <span class="info-text">隧道</span>
        </f7-block>
      </f7-block>
      <f7-block class="info-item">
        <f7-block-title class="info-title">
          选择维修单位
        </f7-block-title>
        <f7-block class="info">
          <span class="info-name">维修单位</span>
          <span class="info-text">广州市市政工程维修处有限公司</span>
        </f7-block>
      </f7-block>
    </f7-block>
  </f7-page>
</template>

<script>
import { Tag, Icon } from "vant"
export default {
  props: {
    title: {
      type: String,
      default: "云城南路四路车行隧道-排水设施-排水设施阻塞、残缺脱落、道面积水"
    },
    tags: {
      type: Array,
      default: () => [
        { title: "待维修", color: "#3385FF" },
        { title: "紧急", color: "#FE5555" }
      ]
    }
  },
  components: {
    [Tag.name]: Tag,
    [Icon.name]: Icon
  },
  data() {
    return {
      steps: [
        { title: "草稿", icon: require("/static/img/list/step-icon1.svg"), activeIcon: require("/static/img/list/step-icon1-3.svg"), finishIcon: require("/static/img/list/step-icon1-2.svg") },
        { title: "待审核", icon: require("/static/img/list/step-icon2.svg"), activeIcon: require("/static/img/list/step-icon2-3.svg"), finishIcon: require("/static/img/list/step-icon2-2.svg") },
        { title: "待安排", icon: require("/static/img/list/step-icon3.svg"), activeIcon: require("/static/img/list/step-icon3-3.svg"), finishIcon: require("/static/img/list/step-icon3-2.svg") },
        { title: "待维修", icon: require("/static/img/list/step-icon4.svg"), activeIcon: require("/static/img/list/step-icon4-3.svg"), finishIcon: require("/static/img/list/step-icon4-2.svg") },
        { title: "待确认", icon: require("/static/img/list/step-icon5.svg"), activeIcon: require("/static/img/list/step-icon5-3.svg"), finishIcon: require("/static/img/list/step-icon5-2.svg") },
        { title: "待验收", icon: require("/static/img/list/step-icon6.svg"), activeIcon: require("/static/img/list/step-icon6-3.svg"), finishIcon: require("/static/img/list/step-icon6-2.svg") }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.detail-title {
  margin: 0;
  padding: calc(30px * var(--ratio)) calc(32px * var(--ratio)) calc(32px * var(--ratio));
  border-bottom: calc(20px * var(--ratio)) solid #F5F7FA;
  .title {
    font-size: var(--font-size-maintitle);
    font-weight: 500;
    color: var(--color-text-title);
    line-height: calc(50px * var(--ratio));
  }
  .tags-wrapper {
    margin-top: calc(20px * var(--ratio));
    ::v-deep .van-tag {
      margin-right: calc(12px * var(--ratio));
      padding: calc(5px * var(--ratio)) calc(12px * var(--ratio));
    }
    ::v-deep .van-tag:last-child {
      margin-right: 0;
    }
  }
}
.main {
  padding: 0;
  margin: calc(32px * var(--ratio)) calc(32px * var(--ratio)) calc(30px * var(--ratio));
  background-color: #F7FCFF;
}
.info-wrapper {
  margin: 0;
  padding: 0 calc(32px * var(--ratio));
  .info-item {
    margin: 0 0 calc(40px * var(--ratio));
    padding: 0;
    border-bottom: 1px solid var(--color-divider-background);
    .info-title {
      margin-bottom: calc(32px * var(--ratio));
      font-size: var(--font-size-subtitle);
      color: var(--color-text-title);
      font-weight: 500;
      line-height: calc(44px * var(--ratio));
    }
    .info {
      display: flex;
      margin: 0 0 calc(30px * var(--ratio));
      padding: 0;
      .info-name {
        flex: 0 0 auto;
        margin-right: calc(88px * var(--ratio));
        font-size: var(--font-size-maincontent);
        color: #61677A;
      }
      .info-text {
        font-size: var(--font-size-maincontent);
        color: var(--color-text-title);
      }
    }
  }
  .info-item:last-child {
    margin-bottom: 0;
    border-bottom-width: 0;
  }
}
::v-deep .page-content {
  padding-top: calc(88px * var(--ratio))
}
</style>